<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG 基本概念</title>
</head>

<body>
    <header>
        <h1>SVG 基本概念</h1>
    </header>
    <main>
        <section>
            <h2>使用svg的方式</h2>
            <div>
                <iframe src="https://svgsilh.com/svg_v2/639149.svg" frameborder="0" width="200px"></iframe>
                <img src="https://svgsilh.com/svg_v2/639149.svg" alt="" width="200px">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <rect width="200" height="200" fill="#ccc" />
                </svg>
            </div>
        </section>
        <section>
            <h2>SVG 重要概念</h2>
            <h3>坐标系</h3>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200"
                style="background-color: bisque;">
                <rect x="50" y="50" width="100" height="100"
                    style="fill:#ccc;stroke:black;stroke-width:1;opacity:0.5" />
            </svg>
            <svg width="200" height="200" viewBox="0 0 50 50">
                <rect x="10" y="5" width="20" height="20" fill="#cd0000" />
            </svg>
        </section>
        <section>
            <h2>形状</h2>

            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <line x1="0" y1="200" x2="200" y2="0" style="stroke:#ccc;stroke-width:1" />
                <circle cx="100" cy="100" r="100" style="fill:none;stroke:aqua" />
            </svg>
        </section>
        <section>
            <h2>文本</h2>
            <p>
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <text x="10" y="20" style="fill:black;">多行文字:
                        <tspan x="10" y="45">第一行</tspan>
                        <tspan x="10" y="70">第二行</tspan>
                    </text>
                </svg>
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
                    </defs>
                    <text x="10" y="100" style="fill:black;">
                        <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
                    </text>
                </svg>
            </p>
        </section>
    </main>
</body>

</html>
